关键字: Flexbox
  • 24 个前端工具网站推荐
    作者:凉皮给大家整理了 24 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区和论坛,以及一些找素材的网站,希望可以帮助到大家。 ▍CSS 相关1、CSS Battle - 在线比拼 CSS CSSBattle在线比拼 C ...
  • 如何学习 CSS?需要学习那些知识?
    很多人想让我给他们推荐有关CSS部分的教程,或者问我如何学习CSS。我也看到很多人对CSS的部分内容感到困惑,一部分原因是由于对语言的过时认识。鉴于CSS在过去几年中发生了相当大的变化,这是一个更新知识的好时机。即使CSS只是你所做工作的一 ...
  • flexbox 收缩算法(上)
    基础的flexbox布局方法,大家都比较熟悉了,日常画页面 flexbox 布局用的66的,灵活布局、不同移动设备的适配我也不在话下,可是同事问我:“知道flex的具体是怎么计算的吗”,我一脸懵,我也不清楚呢,既然不懂就要学?‍♀️,写给未 ...
  • web前端入门到实战:深入解析CSS FlexBox
    Flexbox是一个CSS3的盒子模型(box model),顾名思义它就是一个灵活的盒子(Flexible Box)。 Flexbox模型概念 第一步要来看Flexbox的盒子模型,根据W3C文章所描述,flex的盒子模型如下图所呈现,与 ...
  • web前端入门到实战:送给CSS初学者的悬停过渡动画三部曲
    CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到Web应用程序中,却会让它增色不少。 如下是我们将在本教程中构建的代码 项目设置 在这个项目中,我们将把过渡效果应用到一个class为 ...
  • 漫漫前端之路 CSS -- Flexbox和Position布局讲解
    之前因为客户端引入Facebook的YOGA库,以及微信小程序学习的原因,对于前端的布局有一定的了解。书读百遍其义自见,不经常使用的工具还是需要时不时学习,比如Flexbox和Position布局。 1. 流式布局 在未设置其他任何布局的情 ...
  • web前端入门到实战:浅谈CSS calc()函数的用法
    CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 为什么是 calc() ...
  • web前端入门到实战:CSS弹性伸缩盒子语法教程
    网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C ...
  • Flex 布局教程,前端必会的基础技能,面试必会基础
    前言 flex 是常用的 css3 布局方式,可以用少量的代码高效的实现各种页面布局,是一个基础的但是必须会的基本技能,在面试中经常会用到。 例如,最基本的让你实现元素的水平/垂直居中,或在这个基础上延伸出更多其他复杂一些的问题。 下面我们 ...
  • 关于css的几个建议
    在这篇文章中,我想跟你分享 20 条由 CSS 社区推荐的约定和最佳实践。 有些建议可能比较适合新手,而有些则更高级一些,但我希望每个人都可以在本篇文章中收获自己不知道的知识。 01、谨慎使用外边距属性 与其它的属性不同,垂直方向上的外边距 ...

暂无数据